<template>
  <div class="view">
    <div class="title">添加员工信息</div>


    <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input type="text" v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择性别">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">添加</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button @click="backMain()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        name: '',
        username: '',
        phone: '',
        gender:''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '11位的电话号码', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    backMain() {
      this.$router.push('/home/employee')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('Form Data:', this.form);
          axios({
            url: '/api/employee/add',
            method: 'post',
            data: this.form,
            headers: {
              token: this.$store.state.user.token
            }
          }).then((res) => {
            if (res.data.code === 1) {
              this.$message.success("员工信息添加成功！");
              this.$router.push('/home/employee');
            } else if (res.data.code === 0) {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          console.log('Error submit!!');
          return false;
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.title{
  font-size: 25px;
  font-weight: bold;
  margin: 10px 0 70px 30px;
}
.el-input{
  width: 20%;
}
.view {
  width: 96%;
  margin: 1% auto;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 10px;
  overflow: hidden;
}
</style>